<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>高空风险列表</title>
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips {
        text-align: center;
      }

      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
      }

      .mui-bar~.mui-pull-top-tips {
        top: 24px;
      }

      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }

      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }

      .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
      				-webkit-transition-duration: 400ms;
      				transition-duration: 400ms;*/
        margin: 0;
      }

      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }

      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }

      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }

      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }

      .mui-pull-top-canvas canvas {
        width: 40px;
      }

      /* .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
      } */

      /* .silder-wrap {
        height: 60px;
      }
      
      .mui-fullscreen .mui-segmented-control~.mui-slider-group {
        top: 60px;
      }
      
     .mui-segmented-control .mui-control-item {
        line-height: 60px;
      } */

      /* .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        color: #3188FE;
        position: relative;
      } */

      /* .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after {
        content: '';
        display: block;
        width: 24px;
        height: 3px;
        background: #3188FE;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      } */

      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding:10px 20px;
      }

      .mui-card-header {
        padding: 0 0 10px 0;
        position: relative;
        font-size: 16px;
      }

      .lists {
        padding: 10px 15px 0 0;
      }

      .lists li {
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }

      .lists li .left_name {
        color: #9098AB;
        white-space: nowrap;
      }

      .lists li .right_name {
        color: #333333;
        float: right;
      }

      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188FE;
      }

      .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #3188FE;
      }

      .indexs {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #3188FE;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        margin-right: 5px;
      }

      .txt_l {
        display: inline-block;
      }

      .marks {
        display: inline-block;
        width: 70px;
        height: 26px;
        line-height: 26px;
        /* background-color: #10B7AF; */
        border-radius: 2px;
        color: #fff;
        text-align: center;
        transform: skewX(-15deg);
      }

      .m_r {
        padding-right: 25px;

      }

      .mui-navigate-right:after {
        right: 0 !important;
        top: 15px;
        color: #B4C0CF;
        font-size: 20px;
      }

      .sx_s {
        color: #fff;
      }

      .sx_s span {
        font-size: 17px;
      }

      .b_g1 {
        background-color: #10B7AF;
      }

      .b_g0 {
        background-color: #3188FE;
      }

      .b_g2 {
        background-color: #B4C0CF;
      }

      .screens {
        position: absolute;
        top: 44px;
        left: 0;
        width: 100%;
        min-height: 200px;
        background-color: #fff;
        z-index: 999;
      }

      .content_ul {
        padding: 10px 20px;
        /* overflow: auto; */
        height: 240px;
        position: relative;
      }

      .wrappers {
        position: relative;
        height: 160px;
      }

      .content_ul .rowli ul {
        padding: 0;
        margin: 0;
        list-style: none;
        border-bottom: solid 1px #DCDCDC;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
      }

      .rowli ul li {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #F5F6F7;
        border: solid 1px #C2CFDA;
        border-radius: 3px;
        color: #000;
        /* float: left; */
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        /* flex-grow: 1; */
      }

      .rowli ul li.ls {
        background-color: #3188FE;
        color: #fff;
      }

      .btnli {
        text-align: center;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
      }

      .btnli .btns {
        background-color: #E7ECF1;
      }

      .btnli button {
        width: 45%;
      }

      .head_s {
        padding: 0 20px;
        border-bottom: solid 1px #DCDCDC !important;
        /* height: 20px; */
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">高风险列表</h1>
        <!--<a class="mui-pull-right mui-bar-right" @click="getSearch">
          <img src="../img/screen.png" width="18" style="margin-right: 3px;" />
          <span> 筛选</span>
        </a>-->
      </header>
      <div class="mui-content app-container">
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <div id="item1" class="mui-slider-item mui-control-content mui-active">
              <!--<div id="item1-scroll">-->
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div>
                    <ul class="mui-table-view">
                      <li class="mui-table-view-cell mui-collapse" v-for="(item,index) in projectList"
                        :key="item.deviceId" v-cloak>
                        <a class="mui-navigate-right" href="#">{{item.deviceName}}</a>
                    
                        <div class="mui-collapse-content" style="padding:0;background-color: #efeff4;">
                          <div class="mui-card card_content" v-if="item.taskWps.length > 0"
                            v-for="(item_a,a) in item.taskWps" :key="item_a.id" v-cloak style="margin-right:10px;">
                            <!--页眉，放置标题-->
                             <div class="mui-card-header" @tap="toDetail(item_a,a)">
                               
                               <span class="txt_l">
                                 <span class="indexs">{{a + 1}}</span>
                                    质量风险：{{item_a.riskNode}}
                                 </span>
                                 <span class="m_r mui-navigate-right">
                                   <span class="marks" :class="status(item_a.status,0)">{{status(item_a.status,1)}}</span>
                                 </span>
                                  
                             </div>
                             <div class="mui-card-content">
                               <ul class="mui-table-view lists">
                                 
                                 <li class="lis">
                                   <span class="left_name">风险措施：</span>
                                   <span class="right_name">{{item_a.jobProject}}</span>
                                 </li>
                               </ul>
                             </div>
                          </div>
                          <ul class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
                            <li v-for="(b,i) in item.childs" :key="b.deviceId" class="mui-table-view-cell">
                              <a v-if="b.taskWps.length > 0" class="mui-navigate-right" href="#">{{b.parentName}}/{{b.deviceName}}</a>
                              <div class="mui-collapse-content" style="padding:0;background-color: #efeff4;">
                                <div class="mui-card card_content" v-for="(item_b,b) in b.taskWps" :key="item_b.id" v-cloak style="margin-right:10px;">
                                  <!--页眉，放置标题-->
                                   <div class="mui-card-header" @tap="toDetail(item_b,b)">
                                     
                                     <span class="txt_l">
                                       <span class="indexs">{{b + 1}}</span>
                                          质量风险：{{item_b.riskNode}}
                                       </span>
                                       <span class="m_r mui-navigate-right">
                                         <span class="marks" :class="status(item_b.status,0)">{{status(item_b.status,1)}}</span>
                                       </span>
                                        
                                   </div>
                                   <div class="mui-card-content">
                                     <ul class="mui-table-view lists">
                                       
                                       <li class="lis">
                                         <span class="left_name">风险措施：</span>
                                         <span class="right_name">{{item_b.jobProject}}</span>
                                       </li>
                                     </ul>
                                   </div>
                                </div>
                                <ul class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
                                  <li v-for="(c,i) in b.childs" :key="c.deviceId" class="mui-table-view-cell">
                                    <a v-if="c.taskWps.length > 0" class="mui-navigate-right" href="#">{{c.parentName}}/{{c.deviceName}}</a>
                                    <div class="mui-collapse-content" style="padding:0;background-color: #efeff4;">
                                      <div class="mui-card card_content" v-for="(item_c,c) in c.taskWps" :key="item.id" v-cloak style="margin-right:10px;">
                                        <!--页眉，放置标题-->
                                         <div class="mui-card-header" @tap="toDetail(item_c,c)">
                                           
                                           <span class="txt_l">
                                             <span class="indexs">{{c + 1}}</span>
                                                质量风险：{{item_c.riskNode}}
                                             </span>
                                             <span class="m_r mui-navigate-right">
                                               <span class="marks" :class="status(item_c.status,0)">{{status(item_c.status,1)}}</span>
                                             </span>
                                              
                                         </div>
                                         <div class="mui-card-content">
                                           <ul class="mui-table-view lists">
                                             
                                             <li class="lis">
                                               <span class="left_name">风险措施：</span>
                                               <span class="right_name">{{item_c.jobProject}}</span>
                                             </li>
                                           </ul>
                                         </div>
                                      </div>
                                    </div>
                                  </li>
                    
                                </ul>
                    
                              </div>
                            </li>
                    
                          </ul>
                        </div>
                      </li>
                    </ul>
                    <!-- <div class="mui-card card_content" v-for="(item,index) in projectList" :key="item.id" v-cloak>
                      
                      <div class="mui-card-header" @tap="toDetail(item,index)">
                         
                        <span class="txt_l">
                          <span class="indexs">{{index+1}}</span>
                          质量风险：{{item.riskNode}}
                        </span>
                         

                      </div>
                      <div class="mui-card-content">
                        <ul class="mui-table-view lists">
                          
                          <li class="lis">
                            <span class="left_name">风险措施：</span>
                            <span class="right_name">{{item.jobProject}}</span>
                          </li>
                        </ul>
                      </div>
                       
                    </div> -->
                  </div>
                </div>
                <!--</div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="screens mui-popover mui-popover-top">
        <div class="head_s mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary "
          style="background-color: #fff;">
          <a class="mui-control-item mui-active" href="#items1"><span class="txt">全部</span></a>
          <a class="mui-control-item" href="#items2"><span class="txt">已完成</span></a>
          <a class="mui-control-item" href="#items3"><span class="txt">未完成</span></a>
        </div>
        <div class="content_ul">
          <div class="wrappers">
            <div class="mui-scroll-wrapper">
              <div class="mui-scroll">
                <div class="rowli mui-slider-item mui-control-content mui-active" id="items1">
                  <ul v-if="aList.length>0">
                    <li v-for="(v,index) in aList" :key="v.id" @tap="toDetail(v,v.index)">{{v.index+1}}</li>
                  </ul>
                </div>
                <div class="rowli mui-slider-item mui-control-content" id="items2">
                  <ul v-if="yList.length>0">
                    <li v-for="(v,index) in yList" :key="v.id" @tap="toDetail(v,v.index)">{{v.index+1}}</li>
                  </ul>
                </div>
                <div class="rowli mui-slider-item mui-control-content" id="items3">
                  <ul v-if="wList.length>0">
                    <li v-for="(v,index) in wList" :key="v.id" @tap="toDetail(v,v.index)">{{v.index+1}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="btnli">
            <button type="button" class="mui-btn btns" @tap="getSearch()">关闭</button>
            <button type="button" class="mui-btn mui-btn-primary" @tap="endSearch()">确认</button>
          </div>
        </div>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript">
      mui.init()
      var size = 15;
      var page = 1;
      var donePage = 1;
      var ids = 2;
      if (window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        var self = plus.webview.currentWebview();
        console.log('idssss', self.projectTaskId)
        ids = self.projectTaskId
        getProject(page)
      }

      var vm = new Vue({
        el: '#container',
        data: {
          projectList: [],
          taskList: [],
          aList: [],
          yList: [],
          wList: [],
        },
        created: function() {

          //        getTaskList(donePage)
        },
        methods: {
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          status(item, v) {
            if (v == 1) {
              if (item == 0) {
                return '未开始'
              } else if (item == 1) {
                return '进行中'
              } else if (item == 2) {
                return '已完成'
              }
            } else {
              if (item == 0) {
                return 'b_g0'
              } else if (item == 1) {
                return 'b_g1'
              } else if (item == 2) {
                return 'b_g2'
              }
            }

          },
          toDetail(row, index) {
            //projectCategory  项目分类，0:常规项目 1:单任务项目
            let arr = []
            let currentIndex = 0 // 当前点击工序索引
            vm.projectList.forEach((a, i) => {
              arr = arr.concat(a.taskWps)
              a.childs.forEach((b, index) => {
                arr = arr.concat(b.taskWps)
                b.childs.forEach((c, index) => {
                  arr = arr.concat(c.taskWps)
                })
              })
            })
            let list = arr.map((wp, index) => {
              wp.index = index
              if (wp.id == row.id) {
                currentIndex = wp.index
              }
              return {
                index,
                status: wp.status,
                id: wp.id
              }
            })
            mui.baseApp.openWindow('./groupImplement.html', {
              projectTaskId: row.id,
              projectCategory: 1,
              aList: list,
              idxs: currentIndex
            })
          },
          getSearch() {
            mui('.screens').popover('toggle');
            // this.searchs=!this.searchs
          },
          toTask(item) {
            mui.baseApp.openWindow('./project_task_list.html', {
              projectId: item.id
            })
          },
          endSearch() {
            let h = $(".head_s .mui-active").attr('href')
            if (h == '#items1') {
              this.projectList = this.aList;
            } else if (h == '#items2') {
              this.projectList = this.yList;
            } else if (h == '#items3') {
              this.projectList = this.wList;
            }
            mui('.screens').popover('toggle');
          }

        }
      });

      (function($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration
        });
        // $.ready(function() {
        //   $('.mui-scroll').pullToRefresh({
        //     down: {
        //       callback: function() {
        //         var self = this;
        //         setTimeout(function() {
        //           page = 1
        //           getProject(page);
        //           self.endPullDownToRefresh();
        //         }, 1000);

        //       }
        //     },
        //     up: {
        //       callback: function() {
        //         var self = this;
        //         setTimeout(function() {
        //           // mui.toast("11111")
        //           // console.log(index)
        //           page++;
        //           getProject(page);
        //           self.endPullUpToRefresh();
        //         }, 1000);
        //       }
        //     }
        //   });
           
        //   mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
        // });
      })(mui);

      function getProject(page) {
        // if (page === 1) {
        //   plus.nativeUI.showWaiting('加载中...');
        // }
        plus.nativeUI.showWaiting('加载中...');
        mui.baseApp.httpRequst("get", "/app/acceptance/sensitive/" + ids, {
          // page: page,
          // size: size
        }, function(data) {
          console.log('数据列表', data)
          plus.nativeUI.closeWaiting();
          if (page == 1) {
            vm.projectList = []
          }
          vm.projectList = vm.projectList.concat(data.data)
          vm.aList = [...vm.projectList]
          vm.aList.forEach((res, index) => {
            res.index = index
            // console.log('idds', res)
            if (res.status == 2) {
              // console.log('idds12', res)
              vm.yList = res;
            } else if (res.status == 0 || res.status == 1) {
              vm.wList = res;
            }
          })
          if (data.data.length < size) { //
            mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
            mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
            mui("#item1 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
          }
        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      document.getElementById('slider').addEventListener('slide', function(e) {
        console.log(e.detail.slideNumber);

      });
    </script>
  </body>

</html>
